<template>
  <view class="layout">
    <scroll-view scroll-y class="scroll-view" :lower-threshold="100" @scrolltolower="onLoadMore">
      <view class="cu-list grid col-3 no-border">
        <view class="cu-item" v-for="(item,index) in lists" :key="index">
          <view class="hero-box">
            <view class="hero-num text-orange">No.{{ item.no }}</view>
            <view class="hero-avatar">
              <image :src="item.icon" mode="widthFix"></image>
            </view>
            <view class="hero-name" v-text="item.name"></view>
            <view class="hero-attrs">
              <view>{{item.sex === 1 ? '男':'女'}}</view>
              <view>{{item.remote === 1 ? '远程':'近战'}}</view>
              <view>{{item.magic === 1 ? '有魔法':'无魔法'}}</view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
let game = null,
  page = 1,
  size = 21;
export default {
  data() {
    return {
      total:0,
      lists: []
    };
  },
  onLoad(options) {
    game = options.game;
    this.init();
  },
  methods: {
    init() {
      if( this.total !==0 && this.lists.length >= this.total){
        return false;
      }
      uni.showLoading({
        title:"数据加载中..."
      });
      return this.$api.guessHero.getHeros(game, page, size).then(response => {
        this.lists = [...this.lists, ...response.data.data.list];
        this.total = response.data.data.total;
        uni.hideLoading();
        return response;
      });
    },
    onLoadMore() {
      page++;
      this.init();
    }
  },
  onPullDownRefresh() {
    page = 1;
    this.lists = [];
    this.total = 0;
    this.init().then(() => {
      uni.stopPullDownRefresh();
    });
  }
};
</script>

<style lang="scss" scoped>
  page,.layout,.scroll-view{
    height: 100%;
    overflow: hidden;
  }
  .cu-list{
    padding: 0!important;
  }
  .cu-item{
    padding: 0;
    padding-top: 0!important;
    padding-bottom: 0!important;
  }
  .hero-box{
    margin: 8upx;
    background-color: rgba(#000000, 0.1);
    box-shadow: 2upx 5upx 5upx 0 #CCCCCC;
    .hero-num{
      line-height: 50upx;
      line-height: 50upx;
    }
    .hero-avatar{
      height: 120upx;
      width: 120upx;
      text-align: center;
      margin: 0 auto;
      image{
        width: 100%;
        height: 100%;
      }
    }
    .hero-name{
      font-size:24upx
    }
    .hero-attrs{
      display: flex;
      align-items: center;
      justify-content: space-around;
    }
  }
</style>
